import { ProForm, ProFormDigit, ProFormInstance, ProFormSelect, ProFormText } from "@ant-design/pro-components";
import styles from "./index.module.less";
import { map } from "lodash";
import { Button, Space } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { useRef } from "react";
import useUrl from "@/hooks/useUrl";

type ColumnItem = {
	label?: string;
	name: string;
	options?: any;
	type: "input" | "select" | "digital";
	[key: string]: any;
	isHasCreateBtn?: boolean;
};

interface Props {
	columns: ColumnItem | any[];
	onSearch: (value: any) => void;
	searchBtnProps?: object;
	children: React.ReactNode;
}

export default (props: Props) => {
	const { navigate } = useUrl();
	const formRef = useRef<ProFormInstance>();
	const { columns, onSearch, searchBtnProps = {} } = props;

	const handleSearch = () => {
		formRef.current?.validateFieldsReturnFormatValue?.().then(values => {
			onSearch?.(values);
		});
	};

	return (
		<div className={styles.container}>
			<ProForm submitter={false} formRef={formRef}>
				<Space size={10} className={styles.space_wrap}>
					<Space size={10} wrap className={styles.space_two}>
						{map(columns, (item: ColumnItem) => {
							switch (item.type) {
								case "input":
									return <ProFormText {...item} />;
								case "digital":
									return <ProFormDigit {...item} />;
								case "select":
									return <ProFormSelect {...item} />;
							}
						})}
					</Space>
					<Button icon={<SearchOutlined />} type="primary" {...searchBtnProps} onClick={handleSearch}>
						搜索
					</Button>
					{props.children}
				</Space>
			</ProForm>
		</div>
	);
};
